<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css ribbon</title>
	<style>
		* { 
				/* Basic CSS reset */
				margin:0; 
				padding:0;
		}

		body {
			/* These styles have nothing to do with the ribbon */
			background:url(dark_wood.png) 0 0 repeat;
			padding:35px 0 0;
			margin:auto;
			text-align:center;
		}

		.ribbon {
			display:inline-block;
		}

		.ribbon:after, .ribbon:before {
			margin-top:.5em;
			content: "";
			float:left;
			border:1.5em solid #fff;
		}

		.ribbon:after {
			border-right-color: transparent;
		}		

		.ribbon:before {
			border-left-color: transparent;
		}

		.ribbon a {
			float: left;
			height: 3.5em;
			color: #000;
			text-decoration:none;
			overflow: hidden;
		}
		
		.ribbon span {
			position: relative;
			background: #fff;
			display: inline-block;
			line-height: 3em;
			margin-top: .5em;
			padding: 0 1em;
			transition: background .2s, margin-top .2s;
		}
		
		.ribbon a:hover span {
			margin-top: 0;
			background-color: #FFD204;
		}

		.ribbon span:before {
			content: "";
			position:absolute;
			top:3em;
			left:0;
			border-right:0.5em solid #9B8651;
			border-bottom:0.5em solid #fff;
		}

	</style>
</head>
<body>
	<div class='ribbon'>
			<a href='#'><span>Home</span></a>
			<a href='#'><span>About</span></a>
			<a href='#'><span>Services</span></a>
			<a href='#'><span>Contact</span></a>
		</div>
</body>
</html>